<template>
  <div class="menu-bar">
    <transition name="slide-up">
      <div
        class="menu-wrapper"
        v-show="ifMenuShow"
        :class="{'hide-box-shadow':!ifMenuShow}"
      >
        <div class="menu-top-progress">
          <div
            class="chapters-left"
            @click="prevSection"
          >{{formatType == 1 ? '上一页' : '上一章'}}</div>
          <div class="setting-progress">
            <div class="progress-wrapper">
              <input
                type="range"
                class="progress"
                max="100"
                min="1"
                step="1"
                ref="progress"
                :value="progress"
                :disabled="bookAvailable"
                @change="onProgressChange($event.target.value)"
                @input="onProgressInput($event.target.value)"
              >
            </div>
            <div class="progress-text" v-if="bookAvailable">加载中……</div>
          </div>
          <div
            class="chapters-right"
            @click="nextSection"
          >{{formatType == 1 ? '下一页':'下一章'}}</div>
        </div>
        <div class="menu-bottom-wrapper">
          <div
            class="icon-wrapper"
            @click="handleClickShowContent"
            :class="{active: ifShowContent}"
          >
            <span class="iconfont icon-mulu1"></span>
            <p class="icon-label">目录</p>
          </div>
          <div
            class="icon-wrapper"
            v-if="isShowComment"
            @click="handleClickComment"
          >
            <span class="iconfont icon-pinglun1"></span>
            <p class="icon-label">评论</p>
          </div>
          <div class="icon-wrapper" :class="{active: ifThemeShow}" @click="handleClickReadSet" v-if="formatType == 2">
            <span class="iconfont icon-yuedushezhi"></span>
            <p class="icon-label">阅读设置</p>
          </div>
          <!-- <div class="icon-wrapper" :class="{active: ifThemeShow}" @click="handleClickTheme" v-if="formatType == 2">
            <span class="iconfont icon-beijing"></span>
            <p class="icon-label">背景</p>
          </div>
          <div class="icon-wrapper" :class="{active: ifFontSizeShow}" @click="handleClickSize" v-if="formatType == 2">
            <span class="iconfont icon-zihao"></span>
            <p class="icon-label">字号</p>
          </div> -->
          <div
            class="icon-wrapper"
            @click="handleClickAddBook"
          >
            <span
              class="iconfont"
              :class="isBookMark ? 'icon-shuqian':'icon-icon2'"
            ></span>
            <p class="icon-label">{{isBookMark ? '删除书签' : '添加书签'}}</p>
          </div>
        </div>
      </div>
    </transition>
    <div
      class="text-wrapper"
      v-if="ifTextShow"
    >
      <div class="text-title">{{sectionName}}</div>
      <div class="text-progress">
        <span>{{bookAvailable ? '加载中……' : progress + '%'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuBar',
  props: {
    ifMenuShow: {
      type: Boolean,
      default: false
    },
    bookAvailable: {
      type: Boolean,
      default: false
    },
    progress: {
      type: Number,
      default: 0
    },
    ifTextShow: {
      type: Boolean,
      default: false,
    },
    ifFontSizeShow: {
      type: Boolean,
      default: false
    },
    ifShowContent: {
      type: Boolean,
      default: false
    },
    ifThemeShow: {
      type: Boolean,
      default: false
    },
    section: {
      type: Number,
      default: 0
    },
    sectionName: {
      type: String,
      default: ''
    },
    formatType: Number,
    isBookMark: {
      type: Boolean,
      default: false
    },
    isShowComment: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ifTextShow: false,
      progress: 0,
      section: 0,
      sectionName: ''
    }
  },
  watch: {
    progress: function (progress) {
      this.progress = progress || 0;
    },
    section: function (section) {
      this.section = section || 0;
    },
    sectionName: function (sectionName) {
      this.sectionName = sectionName || '';
    }
  },
  mounted() {
  },
  updated() {
    this.updateProgressBackground()
  },
  methods: {
    // 更改进度条
    onProgressChange(progress) {
      this.$emit('onProgressChange', progress)
    },
    onProgressInput(progress) {
      this.$emit('onProgressInput', progress)
      this.progress = progress;
      this.updateProgressBackground();
    },
    updateProgressBackground() {
      this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
    },
    // 上一章
    prevSection() {
      this.$emit('prevSection', '')
    },
    // 下一章
    nextSection() {
      this.$emit('nextSection', '')
    },
    // 目录
    handleClickShowContent() {
      this.$emit('handleClickShowContent', '')
    },
    // 书签
    handleClickAddBook() {
      this.$emit('handleClickAddBook', !this.isBookMark)
    },
    // 主题
    // handleClickTheme() {
    //   this.$emit('handleClickTheme', '')
    // },
    // 字体
    // handleClickSize() {
    //   this.$emit('handleClickSize', '')
    // },
    handleClickComment() {
      this.$emit('handleClickComment', '')
    },
    handleClickReadSet() {
      this.$emit('handleClickReadSet', '')
    }
  }
}
</script>

<style lang="less" scoped>
.menu-bar {
  .menu-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.1rem;
    background-color: #fff;
    z-index: 102;
    &.hide-box-shadow {
      box-shadow: none;
    }
    .menu-top-progress {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 1.9rem;
      .chapters-left,
      .chapters-right {
        width: 20%;
        text-align: center;
        color: #666666;
        font-size: 0.5rem;
      }
      .setting-progress {
        position: relative;
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .progress-wrapper {
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 0.2rem;
          box-sizing: border-box;
          .progress {
            width: 100%;
            -webkit-appearance: none;
            appearance: none;
            height: 0.1rem;
            background: -webkit-linear-gradient(#248afd, #248afd) no-repeat,
              #f2f2f2;
            background-size: 0 100%;
            outline: 0;
            border: 0;
            &:focus {
              outline: none;
            }
            &::-webkit-slider-thumb {
              appearance: none;
              -webkit-appearance: none;
              height: 0.8rem;
              width: 0.8rem;
              border-radius: 50%;
              background: url(../../../assets/icon-progress.png) no-repeat
                center center;
              background-size: cover;
              border: none;
              box-shadow: none;
            }
          }
        }
        .progress-text {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          color: #333;
          font-size: .32rem;
          text-align: center;
        }
      }
    }
    .menu-bottom-wrapper {
      display: flex;
      justify-content: space-between;
      height: 3.2rem;
      .icon-wrapper {
        position: relative;
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.active {
          .iconfont {
            color: #248AFD;
          }
          .icon-label {
            color: #248AFD;
          }
        }
        .icon-badge {
          position: absolute;
          top: -0.25rem;
          right: -.8rem;
          display: inline-block;
          color: #248AFD;
          font-size: .5rem;
        }
        .iconfont {
          position: absolute;
          bottom: 1.5rem;
          font-size: 0.8rem;
          &.icon-shuqian {
            color: #248AFD;
          }
          &.icon-pinglun1 {
            position: absolute;
            bottom: 1.55rem;
            font-size: 0.7rem;
          }
          &.icon-zihao {
            position: absolute;
            bottom: 1.575rem;
            font-size: 0.65rem;
          }
          &.icon-beijing, &.icon-icon2 {
            position: absolute;
            bottom: 1.475rem;
          }
        }
        .icon-label {
          position: absolute;
          bottom: .5rem;
          font-size: 0.45rem;
          color: #666;
          &:before {
            content: none;
          }
        }
      }
    }
  }
  .text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    bottom: 4.9rem;
    left: 50%;
    z-index: 102;
    width: 10rem;
    min-height: 2.85rem;
    padding: 0.5rem 0.25rem;
    margin-left: -5rem;
    border-radius: 0.25rem;
    background: #fff;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    .text-title {
      color: #333;
      font-size: 0.6rem;
      text-align: center;
    }
    .text-progress {
      color: #999;
      font-size: 0.5rem;
      margin-top: 0.3rem;
    }
  }
}
.slide-down-enter,
.slide-down-leave-to {
  transform: translate3d(0, -100%, 0);
}
.slide-down-enter-to,
.slide-down-leave,
.slide-up-enter-to,
.slide-up-leave {
  transform: translate3d(0, 0, 0);
}
.slide-down-enter-active,
.slide-down-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s linear;
}
.slide-up-enter,
.slide-up-leave-to {
  transform: translate3d(0, 5.1rem, 0);
}
</style>